import './timer.css';
import {useContext, useLayoutEffect} from 'react';
import gsap from 'gsap';
import UseSecondsCount from "../timer-function/timerFunction";
import redDots from '../../images/red.svg';
import {Context} from "../../context";




function Timer() {
  const {seconds} = useContext(Context);
  let min =  Math.floor(seconds / 60);
  let sec  =  seconds  %  60;
  min = min < 10 ? "0" + min : min;
  sec = sec < 10 ? "0" + sec : sec;

  useLayoutEffect(()=> {
      if (seconds === 30) {
          gsap.set('.timer-dots', {backgroundImage: `url(${redDots})`})
          gsap.to('.timer', {color: "#fd4d35", repeat:3})

      }
  }, [seconds]);

  return (
    <div className="timer">
      <div className="timer-block">
        <span className='timer-block__num'>{min}</span>
        <span className='timer-block__text'>минут</span>
      </div>
      <div className="timer-dots"></div>
      <div className="timer-block">
        <span className='timer-block__num'>{sec}</span>
        <span className='timer-block__text'>секунд</span>
      </div>

    </div>

  );
}

export default Timer;